<script setup>

</script>
<template>
    <div>
        <el-row justify="center" class="row-bg">
            <!-- 设置适当的栅格宽度以确保内容不会过宽 -->
            <el-col :span="24" class="center-content">
                Vue3的路由测试
            </el-col>
        </el-row>

        <el-row justify="center">
            <!-- 设置适当的栅格宽度以确保内容不会过宽 -->
            <el-col :span="8" class="center-content">
                <router-link to="/home" active-class="active">
                    <el-button>首页</el-button>
                </router-link>
            </el-col>
            <el-col :span="8" class="center-content">
                <router-link :to="{ path: '/news' }" active-class="active">
                    <el-button>新闻</el-button>
                </router-link>
            </el-col>
            <el-col :span="8" class="center-content">
                <router-link :to="{ name: 'About' }" active-class="active">
                    <el-button>关于</el-button>
                </router-link>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
/* 如果需要为.row-bg 添加背景色或其他样式 */
.row-bg {
    padding: 20px;
    /* 可选：添加一些内边距 */
    background-color: #f0f0f0;
    /* 可选：添加背景颜色 */
}

.center-content {
    text-align: center;
    /* 确保文本在.el-col 内部水平居中 */
}

.active .el-button {
    background-color: #409EFF;
    color: #fff;
}
</style>